<template>
	<view class="product">
		<view class="top">
			<uni-nav-bar :title="$t('products')" :fixed="true" :border="false" color="var(--theme-text-color)" backgroundColor="var(--theme-color)"></uni-nav-bar>
			<view class="icon-xl circle flex-center back-btn" style="position: fixed;top: 5px;left: 16px;z-index: 100;"
				@click="backPage">
				<uni-icons type="arrow-left" size="24" color="#fff"></uni-icons>
			</view>
			<view class="position-fixed page-main" style="padding-bottom: 16px; width: calc(100% - 32px);">
				<view class="" style="height: var(--status-bar-height);width: 100%;"></view>
				<view class="product-search">
					<uni-easyinput class="uni-mt-5 u-input" placeholderStyle="font-size:15px;"
						:styles="{'font-size':'15px'}" style="border-radius: 26px!important;font-size: 15px;background-color: var(--theme-box-bg);"
						:inputBorder="false" suffixIcon="search" v-model="keyWord" :placeholder="$t('product.text18')"
						@iconClick="iconClick"></uni-easyinput>
				</view>
				<!-- <view style="width: 100%;">
					<div class="tab-container fs14">
					  <view class="tab-container fs14">
					    <view v-for="(item, index) in classifyList" :key="index" :class="['tab',activeTabIndex==index?'active':'']" @click="switchTab(index)">
					      {{item.name}}
					    </view>
					    <view class="underline" :style="{transform: `translate(${(activeTabIndex*65)+24}px)`}"></view>
					  </view>
					</div>
				</view> -->
			</view>
		</view>
		<view class="" style="width: 100%;">
			<table style="width: 100%;">
				<thead style="height: 60px;text-align: left;">
					<th>{{$t('nameStock')}}</th>
					<th>{{$t('product.currprice')}}</th>
					<th>{{$t('high')}}</th>
					<th>{{$t('low')}}</th>
				</thead>
				<tbody>
					<tr style="height: 60px;text-align: left;" v-for="(item,index) in productsList" :key="index"
						@click="goDetails(item)">
						<td>{{item.name}}</td>
						<td :class="parseFloat(item.data.open)<item.data.price?'text-down':'text-up'">{{item.data.price}}</td>
						<td :class="parseFloat(item.data.open)<item.data.price?'text-down':'text-up'">{{item.data.high}}</td>
						<td :class="parseFloat(item.data.open)<item.data.price?'text-down':'text-up'">{{item.data.low}}</td>
						<!-- <td>
							<view class="flex">
								<image class="cha_img" :src="`/static/${parseFloat(item.data.zf_rate)>0?'red_up':'green_down'}.png`" mode=""></image>
								&nbsp;&nbsp;
								<text :class="parseFloat(item.data.zf_rate)>0?'text-down':'text-up'">{{item.data.zf_rate}}%</text>
							</view>
						</td> -->
					</tr>
				</tbody>
			</table>
			<!-- 			<uni-load-more :status="loading ? 'loading' : finished ? 'noMore' : 'more'" :contentText="contentText"  @clickLoadMore="loadMore"></uni-load-more> -->
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		computed,
		onUnmounted
	} from 'vue';
	import {
		onReachBottom,
		onPageScroll,
		onShow,
		onHide
	} from '@dcloudio/uni-app'
	import {
		getLang,
		formatAmount
	} from '../../utils/utils.js'
	import {
		getClassifyList,
		getProductsList
	} from '../../api/index.js'
	import config from '../../config';
	import useGlobalProperties from '../../utils/useGlobalProperties.js'
	import {
		useUserStore
	} from '../../store/index.js'
	const userStore = useUserStore()
	const {
		$t,
		$i18n
	} = useGlobalProperties()
	const classifyList = ref([])
	const loading = ref(false)
	const finished = ref(false)
	const keyWord = ref('')
	const activeTabIndex = ref(0)
	const timer = ref(null)
	const pageCof = ref({
		page: 1,
		size: 10
	})
	const contentText = {
		contentdown: $t('loadMore'),
		contentrefresh: $t('loading'),
		contentnomore: $t('noMore')
	}
	const productsList = ref([])
	const backPage = () => {
		history.back()
	}
	const loadMore = () => {
		loading.value = true
		getProductsList({
			name: keyWord.value,
			products_classify_id: classifyList.value[activeTabIndex.value].id,
			...pageCof.value
		}).then(res => {
			// console.log('产品列表', res.data);
			// if (res.data.length < pageCof.value.size) {
			// 	finished.value = true; // 如果数据不足一页，标记为已加载完
			// }
			productsList.value = res.data
			// pageCof.value.page++;
			// loading.value = false
		})
	}
	watch(() => userStore.getSseData(), (newVal, oldVal) => {
		// console.log('新值到啦',newVal);
		if (productsList.value.length == 0) return
		productsList.value.forEach(item => {
			for (const key in newVal) {
				if (newVal.hasOwnProperty(key) && item.code === key) {
					// console.log('newVal[key]',newVal[key]);
					// item.data.amt_value = newVal[key].amt_value;
					// item.data.amt = newVal[key].amt;
					item.data.price = newVal[key].data.price;
					item.data.high = newVal[key].data.high;
					item.data.low = newVal[key].data.low;
					item.data.zf_rate = newVal[key].data.zf_rate;
				}
			}
		})
	}, {
		immediate: true,
		deep: true
	})
	const switchTab = (index) => {
		activeTabIndex.value = index
		productsList.value = []
		pageCof.value.page = 1
		loadMore();
	}
	onMounted(() => {
		getClassifyList().then(res => {
			// console.log('产品分类',res.data);
			classifyList.value = res.data
			classifyList.value.sort((a, b) => a.sort - b.sort);
			loadMore();
		})
	})
	onReachBottom(() => {
		console.log("触底了");
		if (finished.value || loading.value) return; // 如果已加载完或正在加载，则不执行
		loadMore();
	})
	// 去往产品详情页
	const goDetails = (item) => {
		userStore.setSelect({
			name: item.code,
			tick: item.data
		})
		uni.navigateTo({
			url: '/pages/product/product?id=' + item.id + '&symbol=' + item.code + '&class=' + classifyList
				.value[activeTabIndex.value].id,
		})
	}
	// 顶部搜索
	const iconClick = () => {
		productsList.value = []
		pageCof.value.page = 1
		loadMore();
	}
</script>

<style scoped lang="scss">
	.product {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 0 16px;
		display: flex;
		flex-direction: column;
		color: var(--theme-text-color);
	}

	.top {
		height: calc(50px + 44px + 0px + 16px);
		z-index: 1020;
		background-color:var(--theme-color);
	}

	.product-search {
		padding: 10px 0;
		// max-width: 900px;
	}

	.is-input-border {
		border-radius: 26px !important;
	}

	.act_border {
		border: 1px solid #1a7acb;
	}

	.tab-container {
		display: flex;
		position: relative;
	}

	.cha_img {
		width: 8px;
		height: 8px;
		margin-right: 3px;
	}

	.tab {
		padding: 5px 10px;
		color: #666;
		/* 默认文字颜色 */
		transition: color 0.3s;
		/* 切换文字颜色的动画 */
	}

	.tab.active {
		color: #000;
		/* 激活状态文字颜色 */
		font-weight: bold;
	}

	.underline {
		position: absolute;
		bottom: 0;
		height: 4px;
		width: 14px;
		/* 初始宽度 */
		background: #3c9cff;
		/* 下划线颜色 */
		transition-duration: 300ms;
		border-radius: 2px;
	}

	.content {
		width: 100%;
		margin-bottom: 24px;

		.card-item {
			width: 48% !important;
			margin-top: 11px;

			.product-item {
				border-radius: 14px;
				flex: 1;
				overflow: hidden;

				.item {
					border-radius: 12px;
					font-size: 14px;
					background-color: #fff;
					overflow: hidden;
					box-sizing: border-box;
				}

				.card {
					padding: 12px;

					image {
						width: 100%;
						height: 78px;
						border-radius: 8px;
					}

					.info .index {
						width: 8px;
						height: 8px;
						margin-right: 2px;
					}
				}
			}
		}
	}

	.overflow-hidden {
		overflow: hidden;
	}
</style>